<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
		<title>仓库成本统计</title>
	</head>
	<body>
		<form class="layui-form">
			<div class="layui-panel" style="margin: 15px;">
				<div style="padding-top:20px ;">
					<div class="layui-form-item">
					    <label class="layui-form-label">查看时间：</label>
						<div class="layui-inline" id="test6">
							<div class="layui-input-inline">
							  <input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期">
							</div>
							<div class="layui-form-mid">-</div>
							<div class="layui-input-inline">
							  <input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期">
							</div>
					    </div>
						<div class="layui-inline"> 
							<label class="layui-form-label">仓库名称：</label>
							<div class="layui-inline">
								<select name="city" lay-verify="">
								  <option value="">请选择仓库</option>
								  <option value="010">北京</option>
								  <option value="021">上海</option>
								  <option value="0571">杭州</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<div class="layui-btn-container">
								<button type="button" class="layui-btn layui-btn-normal">查询F5</button>						
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
		<div class="layui-tab">
		  <ul class="layui-tab-title">
		    <li class="layui-this">表格显示</li>
		    <li>图形显示</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">
				<table class="layui-hide" id="currentTableId" lay-filter="currentTableId"></table>
		    </div>
		    <div class="layui-tab-item">
				
			</div>
		  </div>
		</div>
		<script src="../../layui/layui.js" charset="utf-8"></script>
		<script>
			layui.use(['form', 'table', 'layer','laydate'], function() {
				var laydate = layui.laydate;
				var $ = layui.jquery,
					form = layui.form,
					table = layui.table,
					layer = layui.layer;
				laydate.render({
				    elem: '#test6'
				    //设置开始日期、日期日期的 input 选择器
				    //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
				    ,range: ['#test-startDate-1', '#test-endDate-1']
				  });
				
				//表格表头
				table.render({
					 elem: '#currentTableId',
					 url: '../../../searchInventoryCostInfo',
					 toolbar: '#toolbarDemo',
					 cols: [[
						 {type: "checkbox", width: 50},
						 {field: 'id', width: 120, title: '结算月份', sort: true},
						 {field: 'inveDescDepot', width: 120, title: '仓库名称'},
						 {field: 'inveDescInventoryNum', width: 120, title: '库存数量', sort: true},
						 {field: 'inveDescPrice', width: 120, title: '库存总金额'},
						 {field: 'sign', width: 120, title: '进货数量'},
						 {field: 'experience', width: 120, title: '进货总金额', sort: true},
						 {field: 'score', width: 120, title: '销售总数', sort: true},
						 {field: 'classify', width: 120, title: '销售总金额'},
						 {field: 'wealth', width: 135, title: '销售利润', sort: true}
					 ]],
					 limits: [10, 15, 20, 25, 50, 100],
					 limit: 15,
					 page: true,
					 skin: 'line'
				});
			})
		</script>
	</body>
</html>
